<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
    .referenceClipPath {
        -webkit-clip-path: url(#referenceClipPathTopLeft);
        clip-path: url(#referenceClipPathTopLeft);
        width: 100px;
        height: 100px;
        position: absolute;
    }
    .referenceClipPath:hover {
        background: green;
    }
    .shapeClipPath {
        -webkit-clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
        clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
        width: 100px;
        height: 100px;
        position: absolute;
    }
    .shapeClipPath:hover {
        background: green;
    }
    #imageWithReferenceClipPath {
        top: 50px;
        left: 50px;
    }
    #imageWithShapeClipPath {
        top: 50px;
        left: 150px;
    }
    #transformedDivContainer {
        position: absolute;
        top: 0;
        left: 0;
        transform: translate3d(25px, 25px, 0);
    }
    #transformedWithReferenceClipPath {
        top: 125px;
        left: 25px;
        transform: rotateY(60deg);
    }
    #transformedWithShapeClipPath {
        top: 125px;
        left: 125px;
        transform: rotateY(60deg);
    }
</style>
<p>Image hit testing should not include clipped-out regions.</p>
<svg width="100" height="0">
    <defs>
        <clipPath id="referenceClipPathTopLeft" clipPathUnits="objectBoundingBox">
            <path id="path" d="M 0 0 L 100 100 L 100 0Z" />
        </clipPath>
    </defs>
</svg>
<img id="imageWithReferenceClipPath" class="referenceClipPath" src="">
<img id="imageWithShapeClipPath" class="shapeClipPath" src="">
<div id="transformedDivContainer">
    <img id="transformedWithReferenceClipPath" class="referenceClipPath" src="">
    <img id="transformedWithShapeClipPath" class="shapeClipPath" src="">
</div>
<div id="console"></div>
<script>
test(function(t)
{
    // Check that clip path affects hit testing for the first row of images.
    // These images are offset with top/left.
    // (75,125) is outside the triangular clip path, (125,75) is inside it.
    assert_not_equals(document.elementFromPoint(75, 125).id, "imageWithReferenceClipPath");
    assert_equals(document.elementFromPoint(125, 75).id, "imageWithReferenceClipPath");
    // Same test as above but for a shape-based clip path offset by 100px.
    assert_not_equals(document.elementFromPoint(75+100, 125).id, "imageWithShapeClipPath");
    assert_equals(document.elementFromPoint(125+100, 75).id, "imageWithShapeClipPath");

    // Check that clip path affects hit testing for the second row. These
    // images are transformed by a container by (25,25) and each has a
    // 3d rotation causing the images to be horizontally squished. The test
    // coordinates are tight and will fail without the Y rotation.
    // (100,255) and (135,175) are outside the triangular clip path.
    // (115,175) and (120,225) are inside the triangular clip path.
    assert_not_equals(document.elementFromPoint(100, 225).id, "transformedWithReferenceClipPath");
    assert_not_equals(document.elementFromPoint(135, 175).id, "transformedWithReferenceClipPath");
    assert_equals(document.elementFromPoint(115, 175).id, "transformedWithReferenceClipPath");
    assert_equals(document.elementFromPoint(120, 225).id, "transformedWithReferenceClipPath");
    // Same test as above but for a shape-based clip path offset by 100px.
    assert_not_equals(document.elementFromPoint(100+100, 225).id, "transformedWithShapeClipPath");
    assert_not_equals(document.elementFromPoint(135+100, 175).id, "transformedWithShapeClipPath");
    assert_equals(document.elementFromPoint(115+100, 175).id, "transformedWithShapeClipPath");
    assert_equals(document.elementFromPoint(120+100, 225).id, "transformedWithShapeClipPath");
}, "Image hit testing should not include clipped-out regions.");
</script>
